<template>
    <h2>注册页面</h2>
    <table border="1" >
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" placeholder="请输入用户名" v-model="info.mL_Name" />
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" placeholder="请输入密码" v-model="info.mL_Pwd" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="注册" class="btn btn-success" @click="register"/>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
    import {ref} from 'vue' //vue框架的ref()函数
    import axios from 'axios'//用axios的全部
    import {useRouter} from 'vue-router'
    const router=useRouter();

    const info=ref({
        "mL_Name": "",
        "mL_Pwd": ""
    })
    const register=()=>{
        if(info.value.mL_Name=="")
        {
            alert('用户名不能为空');
            return;
        }
        if(info.value.mL_Name.length>20)
        {
            alert('用户名不能超过20个字符');
            return;
        }

        if(info.value.mL_Pwd=="")
        {
            alert('密码不能为空');
            return;
        }
        let reg=/^[a-zA-Z0-9]+$/;
        if(!reg.test(info.value.mL_Pwd))
        {
            alert('密码只能是数字和字母');
            return;
        }
        if(info.value.mL_Pwd.length<3)
        {
            alert('密码不能少于3个字符');
            return;
        }
        axios.post('https://localhost:44320/api/Member/MemberRegister',{
            "mL_Name": info.value.mL_Name,
        "mL_Pwd": info.value.mL_Pwd
        })
        .then(res=>{
            console.log(res);
            console.log(res.data);
            if(res.data==-1)
            {
                alert('用户名已存在');
                return;
            }
            else if(res.data>0)
            {
                alert('注册成功');
                router.push('/Login');
            }
            else
            {
                alert('注册失败');
                return;
            }
        })
        .catch(error=>{
            console.log(error);
        })





    }


</script>